<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{:session('cp.cpsysname')}--商户管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="{:config('webconfig.description');}">
    <meta name="keywords" content="{:config('webconfig.keywords');}">
    <meta name="author" content="runoob">
    <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/index.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/css/addmchat.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/bootstrap-datetimepicker.css"/>
    <script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
    <script src="__STATIC_URL__/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="__STATIC_URL__/static/js/bootstrap-datetimepicker.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC_URL__/static/js/commen.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC_URL__/static/layer/layer.js"></script>
    <style>
        thead tr th {
            text-align: center;
        }

        thead tr th:nth-child(1) {
            text-align: left;
        }

        tbody tr td {
            text-align: center;
        }

        .modal-content tbody tr td:nth-child(1) {
            text-align: left;
        }
        .modal-content tbody tr td:nth-child(2) {
            text-align: left;
        }
        .panel-search .form-horizontal .control-label {
            padding-right: 0;
            padding-left: 0;
        }
        #templateHtml tr td:nth-child(1) {
            background: #F4F5F9;
        }
    </style>
</head>
<body>
{include file='public/header'/}
<section id="content">
    <!------------------导航-------------------------->
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">
        <div class="page-heading mgl15 mgr15">
            <ol class="breadcrumb">
                <li>当前位置是&nbsp;:</li>
                <li>交易中心</li>
                <li class="active" style="color: #02b87f;"> 交易明细</li>
            </ol>
        </div>

        <div class="panel panel-search panel-default mgl15 mgr15">
            <div class="panel-heading">
                <h3 class="panel-title">
                    筛选分类
                </h3>
            </div>
            <div class="panel-body">
                <form action="" method="get" class="form-horizontal table-search form-search" role="form" id="machform">
                    <div class="col-sm-6 col-md-6 col-lg-4 ">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">门店：</label>
                            <div class="col-sm-9">
                                <select name="merchant" class="form-control">
                                    <option value="">所有门店</option>
                                    {volist name="machlist" id="search"}
                                    <option value="{$search.merchant}" {if condition="$p_data['merchant'] eq $search.merchant " } selected {/if}>{$search.merchant}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4 ">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">交易方式：</label>
                            <div class="col-sm-9">
                                <select name="pay_fs" class="form-control">
                                    <option value="">请选择交易方式</option>
                                    <option value="0" {if condition="$p_data['pay_fs'] eq '0'"}selected{/if}>微信支付</option>
                                    <option value="1" {if condition="$p_data['pay_fs'] eq '1'"}selected{/if}>支付宝支付</option>
                                    <option value="2" {if condition="$p_data['pay_fs'] eq '2'"}selected{/if}>微信刷卡支付</option>
                                    <option value="8" {if condition="$p_data['pay_fs'] eq '8'"}selected{/if}>会员卡支付</option>
                                    <option value="4" {if condition="$p_data['pay_fs'] eq '4'"}selected{/if}>现金支付</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">订单号：</label>
                            <div class="col-sm-9">
                                <input type="text" name="orderid" class="form-control" placeholder="请输入订单号" value="{$p_data['orderid']}">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">交易时间：</label>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <input name="starttime" type="text" value="{$p_data['starttime']}" readonly="readonly" id="starttime" placeholder="请选择" class="form-control">
                                    <div class="input-group-addon">至</div>
                                    <input name="endtime" type="text" value="{$p_data['endtime']}" readonly="readonly" id="endtime" class="form-control" placeholder="请选择">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">交易状态：</label>
                            <div class="col-sm-9">
                                <select name="pay_statu" class="form-control">
                                    <option value="">请选择交易状态</option>
                                    <option value="0" {if condition="$p_data['pay_statu'] eq '0'"}selected{/if}>未支付</option>
                                    <option value="1" {if condition="$p_data['pay_statu'] eq '1'"}selected{/if}>已支付</option>
                                    <option value="2" {if condition="$p_data['pay_statu'] eq '2'"}selected{/if}>有退款</option>
                                    <option value="8" {if condition="$p_data['pay_statu'] eq '8'"}selected{/if}>订单已关闭</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">交易金额：</label>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <input name="startprice" type="text" value="{$p_data['startprice']}" oninput="value = value.replace(/[^\d.]/g, '')" placeholder="最低金额" class="form-control">
                                    <div class="input-group-addon">至</div>
                                    <input name="endprice" type="text" value="{$p_data['endprice']}" oninput="value = value.replace(/[^\d.]/g, '')" class="form-control" placeholder="最高金额">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="panel-footer">
                <a href="javascript:;" class="btn btn-primary" onclick="searchform()">查找</a>
                <a href="javascript:;" class="btn btn-default" onclick="clearform()">清空</a>
                <span class="btn btn-default" style="float: right">实收金额:{$payconut.paid}</span>
            </div>
        </div>
        <div class="panel mgl15 mgr15">
            <div class="panel-heading addCharts" style="background:#ededed;">交易明细</div>
            <div class="panel-body">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>门店名称</th>
                        <if condition="is_mobile()">
                            <th class="hidden-phone">交易单号</th>
                        </if>
                        <th class="hidden-phone">交易金额</th>
                        <th class="hidden-phone">交易方式</th>
                        <th class="hidden-phone">交易状态</th>
                        <th class="hidden-phone">退款金额</th>
                        <th class="hidden-phone">交易时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    {volist name="paylog" id="vo"}
                    <tr>
                        <td>{$vo['merchant']['merchant']}</td>
                        <if condition="is_mobile()">
                            <td><a  {if condition="checkPath('pay/getpayinfo')"} class="btn-link"  data-target="#myModal" {/if} data-toggle="modal" data-id="{$vo.orderid}">{$vo.orderid}</a></td>
                        </if>

                        <td>{$vo.price}</td>
                        <td>{:getpayfs($vo['pay_fs'])}</td>
                        <td>
                            {if condition="$vo['pay_statu'] eq '2'"}
                            <a  class="btn-link" {if condition="checkPath('pay/gettklist')"} data-target="#orderModal" {/if} data-toggle="modal" data-id="{$vo.orderid}">{:getpaystatus($vo['pay_statu'])}</a>
                            {elseif condition="$vo['pay_statu'] eq '1'"}
                            <a style="color:rgb(0,128,0);">{:getpaystatus($vo['pay_statu'])}</a>
                            {elseif condition="$vo['pay_statu'] eq '0'"}
                            <a style="color:rgb(255,0,0);">{:getpaystatus($vo['pay_statu'])}</a>
                            {elseif condition="$vo['pay_statu'] eq '8'"}
                            <a style="color:#a52a2a;">{:getpaystatus($vo['pay_statu'])}</a>
                            {/if}
                        </td>
                        <td>￥{$vo.tk_price}</td>
                        <td>{$vo['add_time']|date="Y-m-d H:i:s",###}</td>
                    </tr>
                    {/volist}
                    </tbody>
                </table>
            </div>
            {$paylog->render()}
        </div>
        {include file='public/footer'/}
    </div>
</section>
<!-- Modal -->
<div class="modal fade" id="orderModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="orderModalLabel" style="font-size: 16px;">退款列表</h4>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>退款金额</th>
                                <th>退款时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="orderlist">

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel" style="font-size: 16px;">订单详情</h4>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <tbody id="templateHtml"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 退款 详情Modal -->
<div class="modal fade" id="tkdetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="tkdetailLabel" style="font-size: 16px;">退款详情</h4>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <tbody id="tkdetailHtml"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<script src="__STATIC_URL__/static/js/template.js"></script>
<script id="modallist" type="text/html">
    <tr><td>商户订单号：</td><td>{{list.orderno}}</td></tr>
    <tr><td>支付单号：</td><td>{{list.orderid}}</td></tr>
    <tr><td>微信支付商户名称：</td><td>{{list.machname}}</td></tr>
    <tr><td>交易时间：</td><td>{{list.jtime}}</td></tr>
    <tr><td>交易状态：</td><td>
        {{ if(list.pay_statu=="2") }}已退款{{/if}}
        {{ if(list.pay_statu=="1") }}已支付{{/if}}
        {{ if(list.pay_statu=="8") }}订单已关闭{{/if}}
        {{ if(list.pay_statu=="0") }}未支付{{/if}}
    </td></tr>
    <tr><td>收银设备</td><td>
        {{list.d_cashier}}
    </td></tr>
    <tr><td>支付方式</td><td>
        {{ if(list.pay_fs=="2") }}微信刷卡支付{{/if}}
        {{ if(list.pay_fs=="1") }}支付宝支付{{/if}}
        {{ if(list.pay_fs=="8") }}会员卡支付{{/if}}
        {{ if(list.pay_fs=="0") }}微信支付{{/if}}
        {{ if(list.pay_fs=="4") }}现金支付{{/if}}
    </td></tr>
    <tr><td>支付金额：</td><td>{{list.price}} </td></tr>
    <tr><td>退款金额：</td><td>{{ if(list.tk_status =="1") }} {{list.tk_price}} {{ /if }}</td></tr>
</script>
<!--退款模版-->
<script id="modaldetail" type="text/html">
    <tr><td>商户名称：</td><td>{{list.machname}}</td></tr>
    <tr><td>商户订单号：</td><td>{{list.orderid}}</td></tr>
    <tr><td>支付单号：</td><td>{{list.transaction_id}}</td></tr>
    <tr><td>微信退款单号：</td><td>{{list.refund_id}}</td></tr>
    <tr><td>退款单号：</td><td>{{list.tk_orderid}}</td></tr>
    <tr><td>退款时间：</td><td>{{list.addtime}}</td></tr>
    <tr><td>退款方式：</td><td>
       {{list.tk_fs}}
    </td></tr>
    <tr><td>退款金额：</td><td>￥{{list.refund_fee}}</td></tr>
    <tr><td>操作人/设备：</td><td>{{list.action_user}}</td></tr>
</script>
</body>

<script type="text/javascript">
    $(function () {
        //        搜索时间选择
        $('#starttime').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: true,
            endDate: new Date()
        }).on('changeDate', function (ev) {
            var starttime = $('#starttime').val();
            var endtime = $('#endtime').val();
            if (starttime != "" && endtime != "") {
                var startD = new Date(Date.parse(starttime.replace(/-/g, "/")));
                var endD = new Date(Date.parse(endtime.replace(/-/g, "/")));
                var days = parseInt((endD.getTime() - startD.getTime()) / (1000 * 60 * 60 * 24));
                if (days > 31) {
                    alert("日期范围应在一个月之内");
                    $('#starttime').val('');
                    return false;
                }
                ;
                if (endtime < starttime) {
                    $('#starttime').val('');
                    alert('结束时间必须大于大于时间');
                    return;
                }
                ;
                $("#endtime").datetimepicker('setStartDate', starttime);
                $("#starttime").datetimepicker('hide');
            }
        });
        $('#endtime').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: true,
            endDate:new Date()
        }).on('changeDate', function (ev) {
            var starttime = $('#starttime').val();
            var endtime = $('#endtime').val();
            if (starttime != "" && endtime != "") {
                var startD = new Date(Date.parse(starttime.replace(/-/g, "/")));
                var endD = new Date(Date.parse(endtime.replace(/-/g, "/")));
                var days = parseInt((endD.getTime() - startD.getTime()) / (1000 * 60 * 60 * 24));
                if (days > 31) {
                    $('#endtime').val('');
                    alert('日期范围应在一个月之内');
                    return;
                }
                if (endtime < starttime) {
                    $('#endtime').val('');
                    alert('结束时间必须大于开始时间');
                    return;
                }
                $("#starttime").datetimepicker('setEndDate', endtime);
                $("#endttime").datetimepicker('hide');
            }
        });
        $("#myModal").on("show.bs.modal",function(){

            var id = $(event.target).data("id");
            var datas = {};
            $.ajax({
                url:"{:url('pay/getpayinfo')}",
                type:"post",
                async:true,
                data:{
                    orderid:id
                },
                success:function(data){
                    datas.list = data;
                    var html = template('modallist', datas);
                    $("#templateHtml").html(html);
                }

            })
        });
        $("#myModal").on("show.bs.modal",function(){
            $("#templateHtml").html("");
        });
        $("#orderModal").on("show.bs.modal",function(){
            var id = $(event.target).attr("data-id");
            var td = "";
            $.ajax({
                url:"{:url('pay/gettklist')}",
                type:"post",
                async:true,
                data:{
                    orderid:id
                },
                success:function(data){
                    if(data.length>0){
                        for(var i=0;i<data.length;i++){
                            td+="<tr><td>"+data[i].orderid+"</td><td>"+data[i].refund_fee+"</td><td>"+data[i].addtime+"</td><td><a class='btn-link' data-toggle='modal' data-target='#tkdetail'  data-id='"+data[i].id+"'>详情</a></td></tr>"
                        }
                        $("#orderlist").html(td);
                    }else{
                        $("#orderlist").html("<tr><td colspan='4' class='text-center'>暂无数据</td></tr>");
                    }

                }

            })
        });
//        退款详情
        $("#tkdetail").on("show.bs.modal",function(){
            var qx = "{:checkPath('pay/gettkinfo')}";
            if(qx==0){
                layer.alert("您没有权限访问");
                return false;
            }
            var id = $(event.target).attr("data-id");
            var datas = {};
            $.ajax({
                url:"{:url('pay/gettkinfo')}",
                type:"post",
                async:true,
                data:{
                    id:id
                },
                success:function(data){
                    datas.list = data;
                    var html = template('modaldetail', datas);
                    $("#tkdetailHtml").html(html);
                }
            })
        });
        $("#tkdetail").on("hide.bs.modal",function(){
            $("#tkdetailHtml").html("");
        });
    });

</script>
</html>
